<template>
  <div>
    <nav>
      <router-link to="/home">首页</router-link>
      <router-link to="/about">关于</router-link>
      <router-link to="/user/1">user1</router-link>
      <router-link to="/user/2">user2</router-link>
    </nav>
    <button @click="handleToHome">首页</button>
    <button @click="handeleToAbout('zhangsan')">关于</button>
    <button @click="handeleToAbout('lisi')">关于1</button>
    <router-view />
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
function handleToHome() {
  router.push("/home");
}

function handeleToAbout(name) {
  router.push({
    path: "/about",
    query: {
      name,
      age: 18,
    },
  });
}
</script>

<style lang="scss" scoped>
</style>